<template>
	<view class="content">
		<!-- 1. 移除 v-if 延迟问题，改用 v-show 保留组件实例 -->
		<z-paging ref="pagingRef" v-if="firstLoaded || isCurrentPage" v-model="dataList" @query="queryList"
			:fixed="false">
			<!-- 列表项渲染 -->
			<view class="item uni-flex uni-column" v-for="(item, index) in dataList" :key="item.id || index"
				@click="itemClick(item)">
				<view class="uni-flex item-title">
					<view class="title uni-flex-item">举报问题：{{ item.title || '--' }}</view>
					<view class="desc" :class="item.status === '0' ? 'status-processing' : 'status-processed'">
						{{ item.status === '0' ? '受理中' : '已处理' }}
					</view>
				</view>
				<view class="uni-flex uni-column">
					<view class="card-content">
						<text class='card-left-text'>举报ID</text>
						<text class='card-right-text'>{{ item.categoryId || '--' }}</text>
					</view>
					<view class="card-content">
						<text class='card-left-text'>举报时间</text>
						<text class='card-right-text'>{{ item.createTime || '--' }}</text>
					</view>
					<view class="card-content">
						<text class='card-left-text'>举报受理编号</text>
						<!-- <text class='card-right-text'>{{ item.no || '--' }}</text> -->
						<text class='card-right-text'>{{ '--' }}</text>
					</view>
				</view>
			</view>

			<!-- 自定义空数据状态 -->
			<template #empty>
				<view class="empty-container">
					<view class="empty-content">暂无数据</view>
				</view>
			</template>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		nextTick,
		reactive,
		toRefs
	} from "vue";
	import {
		myReport
	} from '@/api/report.js';

	const props = defineProps({
		tabIndex: {
			type: Number,
			default: 0
		},
		currentIndex: {
			type: Number,
			default: 0
		},
		serviceTabs: {
			type: Array,
			default: () => []
		}
	});
	const emit = defineEmits(["reload"]);

	const state = reactive({
		current1: 0,
		currentGroupId: null,
		currentServiceId: null,
		currentAreaId: "",
		itemIds: []
	});
	const {
		current1
	} = toRefs(state);

	// 列表数据存储
	const dataList = ref([]);
	const firstLoaded = ref(false);
	const isCurrentPage = ref(false);
	// z-paging组件引用
	const pagingRef = ref(null);

	// 监听标签页切换，切换到当前页时加载数据
	watch(
		() => props.currentIndex,
		(newVal) => {
			if (newVal === props.tabIndex) {
				isCurrentPage.value = true;
				// 切换到当前页后立即刷新数据（确保组件已显示）
				nextTick(() => {
					if (pagingRef.value) {
						pagingRef.value.reload(); // 重置分页并重新加载
					}
				});
			} else {
				isCurrentPage.value = false;
			}
		}, {
			immediate: true
		}
	);

	// 暴露给父组件的刷新方法
	const reload = () => {
		if (pagingRef.value) {
			pagingRef.value.reload();
		}
	};
	defineExpose({
		reload
	});

	// 列表数据请求函数（核心修复）
	const queryList = async (pageNum, pageSize) => {
		try {
			const params = {
				pageNum: pageNum,
				pageSize,
				status: '0'
			};

			// 调用接口

			const res = await myReport(params);
			console.log('接口返回数据:', res);

			const listData = Array.isArray(res) ? res : (res.rows || []);
			if (!Array.isArray(listData)) {
				throw new Error(`接口返回数据格式错误，预期数组，实际: ${typeof listData}`);
			}

			// 4. 通知z-paging数据加载完成
			pagingRef.value.complete(listData);
			firstLoaded.value = true;

		} catch (error) {
			console.error('数据加载失败:', error.message);
			pagingRef.value.complete(false);
		}
	};

	// 列表项点击事件
	const itemClick = (item) => {
		console.log('点击了列表项:', item);
		uni.navigateTo({
			url: `/pages/reportCenter/reportProgress?id=${item.id}`
		});
	};
</script>

<style lang="scss" scoped>
	.content {
		padding-top: 14rpx;
		height: calc(100vh - 150rpx);
		background: #F5F5F5;
	}

	.box_2_tabs {
		position: sticky;
		top: 0;
		z-index: 10;
		/* Ensure it's above other content */
	}

	.item {
		background: #ffffff;
		box-shadow: 0px 5rpx 20rpx 0px #e2e8f0;
		border-radius: 20rpx;
		margin: 26rpx 24rpx 0;
		padding: 30rpx 23rpx 0rpx 23rpx;

		.item-title {
			margin-bottom: 30rpx;
		}

		.title {
			font-weight: 500;
			font-size: 34rpx;
			color: #303133;
			line-height: 45rpx;
		}

		.desc {
			font-weight: 500;
			font-size: 34rpx;
			color: #FF6A47;
		}
	}

	/* 空数据样式 - 关键修改 */
	.empty-container {
		/* 让容器占满整个可用空间 */
		min-height: 560rpx;
		/* 可根据实际需求调整高度 */
		width: 100%;
		/* 启用flex布局实现居中 */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.card-content {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;

		.card-left-text {
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
		}

		.card-right-text {
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
		}
	}
</style>